<template>
  <div class="jianDing">
    <Menus title="鉴定机构查询">
      <a @click="goback" href="javascript:void(0)" v-if="step>1">
        <div class="img_block">
          <img class="img_margin" src="static/img/icon_fanhui.png" alt="返回">
        </div>
        <span>返回</span>
      </a>
      <router-link to="/" v-if="step>1">
        <div class="img_block">
          <img class="img_margin" src="static/img/icon_fanhuishouye.png" alt="返回首页">
        </div>
        <span>返回首页</span>
      </router-link>
    </Menus>
    <div class="jd-container">
      <div class="left">
        <div class="sider">
          <div class="ht">搜索鉴定机构</div>
          <div class="search-content">
            <input type="text" class="form-control input-lg" placeholder="请输入鉴定机构名称" v-model="searchjdoffice">
            <button type="submit" class="btn btn-primary">搜索</button>
          </div>
          <div class="ht">按鉴定类别查询</div>
          <div v-for="(item, index) in jianding" :key="'key-'+index">
            <div class="sht">
              <span>{{item.title}}</span>
            </div>
            <div class="jd-type-list" v-for="(list,idx) in item.list" :key="'key-'+idx">
              <div class="t" v-if="list.title">{{list.title}}</div>
              <div class="area-content">
                <a class="btn btn-default" @click="getType(type[0])" v-for="(type,i) in list.item" :key="'key-'+i">{{type[0]}}</a>
                <!-- <a class="btn btn-primary" v-for="(type,i) in list.item" :key="'key-'+i">{{type[0]}}</a> -->
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="right">

        <div class="jianding-list">
          <div class="result-ht" v-if="start_flag">
            昆明市及其下属县市一共有
            <strong>{{ currentjdofficelist.length }}</strong>家司法鉴定所
          </div>
          <div class="result-ht" v-if="currentjdofficelist.length && !search_flag && !start_flag">
            已搜索出“{{ currenttype }}”的司法鉴定机构有
            <strong>{{ currentjdofficelist.length }}</strong>家
          </div>
          <div class="result-ht" v-if="search_flag && !start_flag">
            已搜索出名称包含“{{ checkedjdoffice }}”的司法鉴定机构有
            <strong>{{ currentjdofficelist.length }}</strong>家
          </div>
          <a href="#" class="item" @click="toJdofficeDetail(jdoffice)" v-for="(jdoffice, index) in currentjdofficelist" :key="'key-'+index">
            <div class="content">
              <div class="name">{{ jdoffice.name }}</div>
              <ul>
                <li>
                  <label>简介：</label>
                  <div>{{ jdoffice.desc }}</div>
                </li>
                <li>
                  <label>地址：</label>
                  <div>{{ jdoffice.address }}</div>
                </li>
                <li>
                  <label>电话：</label>
                  <div>{{ jdoffice.tell }}</div>
                </li>
              </ul>
            </div>
            <i class="glyphicon glyphicon-chevron-right"></i>
          </a>
        </div>
      </div>
    </div>
    <div class="jianding-detail" v-if="step==1">
      <div class="content">
        <div class="name">{{ currentjdoffice.name }}</div>
        <div class="info">
          <p>{{ currentjdoffice.desc }}
          </p>
        </div>
        <div class="contact">
          <div>

            {{ currentjdoffice.address }}

          </div>
          <div>

            电话：{{ currentjdoffice.tell }}</div>
        </div>
        <div class="ht">鉴定人员</div>

        <div class="lawyer-list">
          <div class="container-fluid">
            <div class="row">
              <div class="col-md-2" v-for="(employee, index) in currentemployeelist" :key="'key-' + index">
                <a href="#" class="item" @click="getPersonnel(employee)">
                  <div class="c">
                    <div class="lawyer-name">{{ employee.name }}</div>
                  </div>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="mask" @click="step=0"></div>
    </div>
    <Dialogs v-model="dialog" />

  </div>
</template>
<script>
import Menus from '../components/Menu'
import Dialogs from '../components/Dialog'
import api from '../datas/api'
import { jianding } from '../config'
export default {
  data() {
    return {
      jianding,
      name: '',
      step: 0,
      dialog: {
        maskClose: true,
        show: false,
        title: '叶攀',
        cancelBtn: '返回',
        content:
          '编号：530101001028<br> 技术职称：实验师<br> 行业资格：执业教师<br> 执业类别：法医物证鉴定；法医临床鉴定。'
      },
      currenttype: '',
      currentjdofficelist: [],
      currentjdoffice: {},
      currentemployeelist: [],
      search_flag: false,
      start_flag: true,
      searchjdoffice: '',
      checkedjdoffice: '',
      searchedjdoffice: []
    }
  },
  methods: {
    goback() {
      if (this.step > 1) {
        this.step = 1
      }
    },
    getPersonnel(employee) {
      this.dialog.show = true
      this.dialog.title = employee.name
      this.dialog.content =
        '编号：' +
        employee.no +
        '技术职称：' +
        employee.title +
        '<br> 行业资格：' +
        employee.qualification +
        '<br> 执业类别：' +
        employee.industry_type
    },
    async getInitialItem() {
      let data = await this.$get(api.jiandingoffice)
      this.currentjdofficelist = data.items
    },
    async getItem(type) {
      let data = await this.$get(api.jiandingoffice + type)
      this.currentjdofficelist = data.items
    },
    async getJdofficeEmployee(jdoffice) {
      let data = await this.$get(api.jiandingemployee + jdoffice.id)
      this.currentemployeelist = data.items
    },
    getType(type) {
      this.start_flag = false
      this.search_flag = false
      for (let j in this.jianding) {
        for (let k = 0; k < this.jianding[j].list.length; k++) {
          for (let l = 0; l < this.jianding[j].list[k].item.length; l++) {
            if (this.jianding[j].list[k].item[l][0] === type) {
              if (this.jianding[j].list[k].item[l][1] === 1) {
                this.currenttype = this.jianding[j].list[k].qtitle
              } else {
                this.currenttype = this.jianding[j].list[k].item[l][0]
              }
            }
          }
        }
      }
      this.getItem(this.currenttype)
    },
    async getSearchedJdOffice() {
      if (this.searchjdoffice.length > 1) {
        let reg = /[\u4e00-\u9fa5]/
        let info = this.searchjdoffice
        for (let char of this.searchjdoffice) {
          if (!reg.test(char)) {
            info = info.replace(char, '')
          }
        }
        if (info.length === 0) {
          return
        }
        this.start_flag = false
        this.search_flag = true
        this.searchedjdoffice.length = 0
        this.checkedjdoffice = info
        this.currentresidence = ''
        let data = await this.$get(api.jiandingoffice)
        for (let i = 0; i < data.items.length; i++) {
          if (data.items[i].name.includes(this.checkedjdoffice)) {
            this.searchedjdoffice.push(data.items[i])
          }
        }
        this.currentjdofficelist = this.searchedjdoffice
      }
    },
    toJdofficeDetail(jdoffice) {
      this.step = 1
      this.currentjdoffice = jdoffice
      this.getJdofficeEmployee(jdoffice)
    }
  },
  mounted() {
    this.getInitialItem()
  },
  watch: {
    searchjdoffice() {
      this.searchjdoffice = this.searchjdoffice.replace(' ', '')
      this.getSearchedJdOffice()
    }
  },
  components: {
    Menus,
    Dialogs
  }
}
</script>
<style lang="scss">
.jianDing {
  background: #ddd;
  min-height: 100vh;
  .lawyer-list {
    margin-left: -15px;
    padding-bottom: 80px;
    .item {
      border: 1px solid #eee;
      padding: 25px;
      display: block;
      margin-bottom: 30px;
      &:active {
        background: #f7f7f7;
      }
      .imgs {
        width: 72px;
        height: 72px;
        background-size: cover;
        background-position: center 0;
        flex-shrink: 0;
        border-radius: 50%;
        margin-right: 10px;
      }
      .lawyer-name {
        font-size: 18px;
        color: #333;
        text-align: center;
      }
      .lawyer-intro {
        font-size: 14px;
        color: #808080;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
      }
    }
  }
  .lawyer-about {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: 159px;
    overflow-y: scroll;
    z-index: 2100;
    background: #ddd;
    .lawyer {
      .content {
        margin: 100px 15px 10px;
        border-radius: 5px;
        position: relative;
        border-bottom: 1px solid #ddd;
        .imgs {
          position: absolute;
          top: -75px;
          left: 50%;
          margin-left: -75px;
          width: 150px;
          height: 150px;
          border: 3px solid #fff;
          border-radius: 50%;
          background-size: cover;
          background-color: #fff;
          background-position: center 0;
          box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3);
        }
        .sc {
          background: #fff;
          padding: 35px;
          border-radius: 0 0 5px 5px;
          color: #808080;
          font-size: 18px;
        }
        .tel {
          display: flex;
          justify-content: center;
          align-items: center;
          padding: 15px;
          border-radius: 0 0 5px 5px;
          color: #999;
          .icon {
            color: #4caf50;
          }
        }
      }
      .body {
        background: #fff;
        padding: 25px;
        min-height: 70px;
        color: #555;
        border-radius: 5px;
        margin: 15px 15px 80px;
        border-bottom: 1px solid #ddd;
        .ht {
          border-bottom: 1px solid #eee;
          padding-bottom: 10px;
          margin-bottom: 10px;
          font-size: 24px;
          font-weight: bold;
        }
        .detail {
          padding: 30px;
          font-size: 18px;
        }
      }
      .intro {
        padding: 105px 15px 50px;
        border-radius: 5px 5px 0 0;
        background: #1488cc; /* fallback for old browsers */
        background: -webkit-linear-gradient(
          to right,
          #2b32b2,
          #1488cc
        ); /* Chrome 10-25, Safari 5.1-6 */
        background: linear-gradient(
          to right,
          #2b32b2,
          #1488cc
        ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

        .name {
          display: block;
          text-align: center;
          color: #fff;
          font-size: 36px;
          margin-bottom: 5px;
        }
        .lawfir {
          padding-top: 10px;
          color: #fff;
          opacity: 0.6;
          text-align: center;
          font-size: 18px;
        }
        .info {
          text-align: center;
          font-size: 24px;
          color: rgba(255, 255, 255, 0.2);
          span {
            color: #fff;
            padding: 0 15px;
          }
        }
      }
    }
  }
  .lawfirm-about {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: 159px;
    overflow-y: scroll;
    z-index: 2100;
    background: #ddd;
    .container {
      background: #fff;
      margin: 30px auto 80px;
      padding: 60px;
    }
    .ht {
      font-size: 32px;
      font-weight: bold;
      padding: 30px;
      border-bottom: 1px solid #ddd;
      margin-bottom: 30px;
      text-align: center;
    }
    .detail {
      font-size: 18px;
      padding: 30px;
      p {
        margin-bottom: 20px;
      }
    }
  }
  .jianding-detail {
    .content {
      position: fixed;
      top: 159px;
      right: 0;
      bottom: 0;
      left: 30%;
      background: #fff;
      z-index: 2000;
      padding: 40px;
      overflow-y: scroll;
      font-size: 16px;

      .name {
        font-size: 28px;
        padding-bottom: 20px;
      }
      .more {
        padding: 20px 0;
      }
      .info {
        margin-bottom: 20px;
        p {
          margin-bottom: 0;
        }
      }
      .ht {
        font-size: 20px;
        color: #555;
        line-height: 1;
        border-left: 5px solid #558ce1;
        padding-left: 10px;
        margin: 35px 0 15px;
      }
    }
    .contact {
      padding-bottom: 15px;
      border-bottom: 1px solid #ddd;
      div {
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        span {
          color: #558ce1;
          display: inline-flex;
          align-items: center;
        }
      }
    }
    .mask {
      position: fixed;
      top: 158px;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.5);
      z-index: 1000;
    }
  }
  .jd-container {
    display: flex;
    height: 100vh;
    .left,
    .right {
      height: 100%;
      overflow-y: scroll;
      padding: 160px 0 20px;
    }
    .left {
      width: 35%;
      background: #fff;
    }
    .right {
      width: 65%;
    }
    .jianding-list {
      padding: 40px;
      .result-ht {
        font-size: 18px;
        padding-bottom: 20px;
        strong {
          color: red;
        }
      }
      .item {
        display: block;
        background: #fff;
        margin-bottom: 20px;
        padding: 25px 40px 25px 25px;
        font-size: 16px;
        color: #808080;
        border-radius: 5px;
        display: flex;
        align-items: center;
        &:active {
          background: #f7f7f7;
        }
        .content {
          flex: 1;
          .name {
            color: #555;
            font-size: 24px;
            padding-bottom: 10px;
          }
          ul {
            list-style: none;
            padding: 0;
            li {
              display: flex;
              label {
                width: 50px;
                flex-shrink: 0;
              }
            }
          }
        }
        .glyphicon {
          flex-shrink: 0;
          font-size: 24px;
          color: #ddd;
        }
      }
    }
    .sider {
      .ht {
        padding: 10px 20px;
        font-size: 18px;
        color: #808080;
        background: #eee;
        margin-bottom: 20px;
      }
      .sht {
        padding: 20px;
        font-size: 24px;
        color: #2e6da4;
        border-bottom: 1px solid #ddd;
        margin-bottom: 20px;
        // border-left: 5px solid #2e6da4;
        span {
          display: block;
          line-height: 1.2;
          padding-left: 8px;
          border-left: 6px solid #2e6da4;
        }
      }
      .jd-ht {
        font-size: 24px;
        color: #333;
        border-left: 5px solid #2e6da4;
      }
      .jd-type-list {
        margin: 20px;
        padding: 20px 20px 10px;
        background: #eee;
        .t {
          padding-left: 5px;
          margin-bottom: 15px;
          font-size: 18px;
          color: #333;
          // border-left: 5px solid #2e6da4;
          line-height: 1;
        }
        .area-content {
          padding: 0;
          a {
            margin: 0 6px 6px 0;
          }
        }
      }

      .search-content {
        padding: 0 20px 20px;
        display: flex;
        margin-bottom: 20px;
        input {
          border-radius: 6px 0 0 6px;
          border-right: 0;
        }
        .btn {
          flex-shrink: 0;
          border-radius: 0 6px 6px 0;
        }
      }
    }
  }
}
</style>
